<template>
	<view class="bianjiaddress">
		<headertop :title="pagetitle" str1="oridei" :back1="back1"></headertop>
		<view class="bianjiaddressbackimg">

		</view>
		<view class="centerforms">
			<view class="lineform">
				<view class="labletitle">
					收货人
				</view>
				<input type="text" v-model="query.name" placeholder="请填写收货人姓名" />
			</view>
			<view class="lineform">
				<view class="labletitle">
					手机号码
				</view>
				<input type="text" v-model="query.phone" placeholder="请填写收货人手机号" />
			</view>
			<view class="lineform" @click="getdizhi">
				<view class="labletitle">
					所在地区
				</view>
				<input type="text" :disabled="true" v-model="address1" placeholder="省、市、区、县、街道" />
				<image src="https://shop.hacuu.com/static/Frame@2x (7).png" class="dzicon" mode="">
				</image>
			</view>
			<view class="lineform" style="border: none;">
				<view class="labletitle">
					详细地址
				</view>
				<input type="text" v-model="query.address" placeholder="街道、楼号" />
			</view>
		</view>
		<view class="sheweimoren">
			<span style="margin-left: 24rpx;">设为默认收货地址</span>
			<image src="https://shop.hacuu.com/static/Frame@2x (17).png" mode="" @click="query.is_default=1"
				v-if="query.is_default==0">
			</image>
			<image src="/static/Frame@2x.png" @click="query.is_default=0" mode="" v-else>
			</image>
		</view>
		<view class="fixedbox" @click="save">
			<view class="centerbox">
				<view class="savebtn">
					保存
				</view>
			</view>
		</view>
		<up-picker :show="show" ref="uPickerRef" :defaultIndex="defaultGroupIndex" :columns="areaList" keyName="label"
			@cancel="cancel" @confirm="confirm" @change="changeHandler"></up-picker>
	</view>
</template>

<script setup>
	import city from '@/common/area.js'
	import headertop from '@/components/header.vue'
	import {
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		addressdetail,
		addaddress,
	} from '@/api/my.js'
	import {
		reactive,
		ref
	} from 'vue'
	const back1 = ref('')
	var areaList = reactive([city])
	const query = reactive({
		name: '',
		phone: '',
		province: '',
		city: '',
		area: '',
		address: '',
		is_default: 0,
		id: undefined,
		lat: 1,
		lng: 1
	})
	const address1 = ref('')
	const show = ref(false)
	const uPickerRef = ref(null)
	const defaultGroupIndex = ref([1, 2, 2])
	const pagetitle = ref('')
	onPageScroll((e) => {
		console.log(e, 'eeeeeeeeeeeeeee');
		if (e.scrollTop > 100) {
			back1.value = '#84BD78'
		} else {
			back1.value = ''
		}
	})
	onLoad((opt) => {
		if (opt.id) {
			init(opt.id)
			query.id = opt.id
			pagetitle.value = '编辑收货地址'
		} else {
			// getjwd()
			pagetitle.value = '新增收货地址'
		}
	})
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
		} = e;
		let city = value[0].children

		if (columnIndex === 0) {
			uPickerRef.value.setColumnValues(1, city);
			uPickerRef.value.setColumnValues(2, city[0].children);
		} else if (columnIndex === 1) { // 市变化更新区/县列表
			uPickerRef.value.setColumnValues(2, value[1].children);
		}
	};
	// 点击取消
	const cancel = () => {
		show.value = false;
	}
	async function save() {
		console.log(query, 'queryqueryqueryquery');
		for (var i in query) {
			if (i != 'is_default' && i != 'id') {
				if (!query[i]) {
					uni.showToast({
						title: '请补全信息提交',
						icon: 'none'
					})
					return
				}
				if (i == 'phone') {
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(query.phone))) { //校验手机号码是否有误
						uni.showToast({
							title: '请填写正确手机号码',
							icon: "none"
						});
						return false;
					}
				}

			}
		}

		const res = await addaddress(query)
		if (res.code == 1) {
			uni.navigateBack()
			setTimeout(() => {
				uni.showToast({
					title: '保存成功'
				})
			}, 500)
		}

	}
	async function getjwd() {
		var myAmapFun = new AMapWX({
			key: 'e2d3be3bfcadad2d69b6c36439fab922'
		});
		myAmapFun.getRegeo({
			success: function(data) {
				//成功回调
				console.log(data, 'data------------');
				query.lat = data[0]['latitude']
				query.lng = data[0]['longitude']

			},
			fail: function(info) {
				//失败回调
				console.log(info)
				uni.showToast({
					title: '获取定位失败',
					icon: 'none'
				})
			}
		})
	}

	function getdizhi() {
		areaList = reactive([city])
		setTimeout(() => {
			var s = areaList[0].findIndex(item => item.label == query.province)
			if (s == -1) {
				s = 0
			}
			var s1 = areaList[0][s]['children'].findIndex(item => item.label == query
				.city)
			if (s1 == -1) {
				s1 = 0
			}
			var s2 = areaList[0][s]['children'][s1]['children']
				.findIndex(item => item.label == query.area)
			if (s2 == -1) {
				s2 = 0
			}
			defaultGroupIndex.value = [s, s1, s2]

			console.log(defaultGroupIndex.value, 'eeeeeeeeeeeeeee', s1);
			// defaultGroupIndex.value = [0, 0, 0]
			uPickerRef.value.setColumnValues(1, areaList[0][s].children);
			uPickerRef.value.setColumnValues(2, areaList[0][s].children[s1].children);
		}, 500)
		show.value = true
	}
	async function init(id) {
		const res = await addressdetail({
			id
		})
		if (res.data.code == 1) {
			query.name = res.data.data.name
			query.phone = res.data.data.phone
			query.province = res.data.data.province
			query.city = res.data.data.city
			query.area = res.data.data.area
			query.address = res.data.data.address
			query.is_default = res.data.data.is_default
			address1.value = `${query.province}-${query.city}-${query.area}`

		}
	}
	const confirm = (e) => {
		let {
			value
		} = e
		query.province = value[0].label //省name
		query.city = value[1].label //市name
		query.area = value[2].label //区name、
		address1.value = `${query.province}-${query.city}-${query.area}`
		show.value = false
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.bianjiaddress {
		width: 100%;
		overflow: hidden;
		position: relative;

		.fixedbox {
			width: 100%;
			height: 210rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			overflow: hidden;
			position: fixed;
			bottom: 0%;

			.centerbox {
				width: 688rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx auto;

				.leftdz {
					width: 328rpx;
					height: 90rpx;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					border: 2rpx solid #AF7E62;
					text-align: center;
					line-height: 90rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #D1986F;
				}

				.savebtn {
					width: 100%;
					height: 90rpx;
					background: #D1986F;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					text-align: center;
					line-height: 90rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-left: 32rpx;
				}
			}
		}

		.bianjiaddressbackimg {
			width: 100%;
			height: 314rpx;
			position: absolute;
			z-index: -1;
			background: linear-gradient(180deg, #FCE6CD 0%, rgba(252, 230, 205, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

		}

		.sheweimoren {
			width: 686rpx;
			height: 92rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: auto;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;

			image {
				width: 72rpx;
				height: 72rpx;
				margin-right: 24rpx;
			}
		}

		.centerforms {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: auto;
			margin-top: 208rpx;
			overflow: hidden;

			.lineform {
				width: 636rpx;
				height: 108rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F2F2F2;
				margin: auto;

				.dzicon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 90rpx;
				}

				.labletitle {
					width: 128rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}

				input {
					margin-left: 32rpx;
				}
			}
		}
	}
</style>